<template>
	<div class="good-list-wrap" >
		<div class="top-fix" >
			<div
			class="search-box" >
				<img @click="handleToBack" class="search-left-arrow" :src="searchLeftArrow" alt="">
				
				<div class="search-input" >
					<van-search
					  v-model="searchValue"
					  placeholder="请输入商品或者分类"
					  @search="onSearch"
					  :left-icon="searchHistoryIcon"
					>
					</van-search>
					
					<div class="search-btn active-btn" @click="handleToSearch" >搜索</div>
				</div>
			</div>
			
			<div class="tab-ul" >
				<div @click="handleToCurrent(0)" :class="['tab-li', current === 0 ? 'on' : '']" >综合</div>
				<div @click="handleToCurrent(1)" :class="['tab-li', current === 1 ? `on ${sortStatus}` : 'default']" >销量</div>
				<div @click="handleToCurrent(2)" :class="['tab-li', current === 2 ? 'on' : '']" >最新</div>
				<div @click="handleToCurrent(3)" :class="['tab-li', current === 3 ? `on ${sortStatus}` : 'default']" >价格</div>
			</div>
		
		</div>
		
		
		<van-list
		  v-model="loadingPage"
		  :finished="finished"
		  :finished-text="list.length ? '没有更多了' : ''"
		  @load="ajaxGoodList"
		  :immediate-check="false"
		>
		
			<div v-if="finished && !list.length" class="empty-good" >
				<van-empty description="暂无商品" />
			</div>
			
			<!-- 商品列表 -->
			<div class="good-ul" >
				<goodItem
				v-for="(item, index) in list"
				:key="index"
				:item="item"
				></goodItem>
			</div>
		
		</van-list>
		
	</div>
</template>

<script>
	import { searchLeftArrow, searchHistoryIcon, sortDefault, sortDown, sortUp } from '@/tool/static-img';
	import goodItem from './components/good-item';
	import { GOOD_LIST } from '@/api/home';
	export default {
		components:{
			goodItem
		},
		data() {
			return {
				searchLeftArrow, searchHistoryIcon,
				sortDefault, sortDown, sortUp,
				searchValue: localStorage.getItem('searchKey') || '',
				current: 0,
				cate_id: this.$route.query.cate_id,
				sortStatus: 'default',
				localStorageHistory: [],
				
				
				// 分页
				page: 1,
				pageSize: 20,
				list: [],
				loadingPage: false,
				finished: false,
			}
		},
		activated() {
			// 本地历史记录
			let searchHistory = localStorage.getItem('searchHistory');
			this.searchValue= localStorage.getItem('searchKey') ||''
			if(searchHistory) {
				this.localStorageHistory = JSON.parse(searchHistory);
			}else {
				this.localStorageHistory = [];
			}
		},
		beforeRouteEnter(to, from, next) {
        next(vm => {
			// console.log(from);
            if(from.name == 'search' || from.name==null || from.name == 'goods') {
                vm.resetInit();
            }
        }) 
    },
		methods: {
			handleToBack() {
				localStorage.removeItem('searchKey');
				this.$router.back()
			},
			onSearch(val) {
				
				if(!val.trim()) {
					this.resetInit();
					return;
				}
				
				// 去重
				this.localStorageHistory = this.localStorageHistory.filter(item => {
					return item != val;
				})
				
				
				this.localStorageHistory.unshift(val);
				this.localStorageHistory = this.localStorageHistory.slice(0, 20);
				
				localStorage.setItem('searchHistory', JSON.stringify(this.localStorageHistory));
				
				this.resetInit();
			},
			// 去搜索
			handleToSearch() {
				
				this.onSearch(this.searchValue);
			},
			// 切换tab
			handleToCurrent(index) {
				if(this.current == index && (index == 0 || index == 2)) {
					return
				}
				
				// 自身时,有排序则改变
				if(this.current == index && (index == 1 || index == 3)) {
					if(this.sortStatus == 'default') {
						this.sortStatus = 'sortDown';
					}else if(this.sortStatus == 'sortDown') {
						this.sortStatus = 'sortUp';
					}else if(this.sortStatus == 'sortUp') {
						this.sortStatus = 'default';
					}
				}else {
					this.sortStatus = 'default';
				}
				
				this.current = index;
				
				
				// 数据请求
				this.resetInit();
			},
			resetInit() { //重置
			  this.page = 1;
			  this.list = [];
			  this.finished = false;
			
			  this.loadingPage = true;
			  this.ajaxGoodList()
			},
			// 列表请求
			ajaxGoodList() {
				let params = {};
				params['page_num'] = this.page;
				params['page_size'] = this.pageSize;

				if(this.cate_id) {
					params['cate_id'] =  this.$route.query.cate_id;
				}

				if(this.$route.query.shopId) {
					params['shop_id'] = this.$route.query.shopId;
				}
				
				
				if(this.searchValue && this.searchValue.trim()) {
					params['keyword'] = this.searchValue.trim();
				}
				
				params['sort_type'] = this.current + 1;
				
				if((this.current == 1 || this.current == 3) && this.sortStatus != 'default') {
					if(this.sortStatus == 'sortUp') {
						params['sort_rule'] = 1;
					}else if(this.sortStatus == 'sortDown') {
						params['sort_rule']= 0;
					}
 				}
				
				this.$http.post(GOOD_LIST, params)
				.then(res => {
				  const {
				    list
				  } = res.data;
				
				  if(list && list.length) {
				     this.page++;
				     this.list = this.list.concat(list);
				     // 加载状态结束
				     this.loadingPage = false;
				     if(list.length < this.pageSize) {
				      this.finished = true;
				     }
				  }else {
				    this.finished = true;
				  }
				})
			}
		}
		
		
	}
</script>

<style lang="scss" >
	.good-list-wrap{
		position: relative;
		min-height: 100vh;
		padding-top: 1.8rem;
		background-color: #f5f5f5;
		padding-bottom: calc(0.2rem + constant(safe-area-inset-bottom));
		padding-bottom: calc(0.2rem + env(safe-area-inset-bottom));
		box-sizing: border-box;
		.top-fix{
			position: fixed;
			top: 0;
			width: 100%;
			height: 1.8rem;
			background-color: #fff;
		}
		.search-box{
			display: flex;
			align-items: center;
			width: 100%;
			height: 0.88rem;
			.van-icon-clear{
				display: block;
				padding-bottom: 4px;
			}
			.search-left-arrow{
				width: 0.4rem;
				height: 0.4rem;
				padding: 0.24rem 0 0.24rem 0.32rem;
			}
			.search-input{
				position: relative;
				width: 6.22rem;
				margin-left: 0.24rem;
				.search-btn{
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 0.28rem;
					font-weight: 400;
					color: #fff;
					position: absolute;
					right: 0.06rem;
					top: 0;
					bottom: 0;
					margin: auto;
					width: 1.12rem;
					height: 0.52rem;
					border-radius: 0.3rem;
					background: linear-gradient( 270deg, #1261E2 0%, #4A89EC 100%);
				}
				.van-search{
					padding: 0;
					background-color: #f4f4f4;
					border-radius: 0.32rem;
					.van-search__content{
						background-color: #f4f4f4;
						border-radius: 0.32rem;
						.van-cell{
							align-items: center;
							padding: 3px 3px 3px 0;
						}
					}
					.van-field__control{
						height: 26px;
						width: 3.6rem;
						line-height: 26px;
						font-weight: 400;
						font-size: 0.28rem;
					}
					.van-icon{
						height: 20px;
					}
					.van-icon__image{
						width: 20px;
						height: 20px;
					}
				}
			}
		}
		
		.tab-ul{
			display: flex;
			
			height: 0.92rem;
			.tab-li{
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 1;
				font-weight: 400;
				font-size: 0.32rem;
				color: #999999;
				&.on{
					font-weight: 500;
					font-size: 0.32rem;
					color: #1D69E4;
				}
				&.default{
					&::before{
						content: '';
						position: absolute;
						top: 0;
						bottom: 0;
						right: 0.4rem;
						margin: auto;
						width: 0.14rem;
						height: 0.2rem;
						background: url('../../images/sort-default.png') no-repeat center;
						background-size: cover;
					}
				}
				&.sortDown{
					&::before{
						content: '';
						position: absolute;
						top: 0;
						bottom: 0;
						right: 0.4rem;
						margin: auto;
						width: 0.14rem;
						height: 0.2rem;
						background: url('../../images/sort-down.png') no-repeat center;
						background-size: cover;
					}
				}
				&.sortUp{
					&::before{
						content: '';
						position: absolute;
						top: 0;
						bottom: 0;
						right: 0.4rem;
						margin: auto;
						width: 0.14rem;
						height: 0.2rem;
						background: url('../../images/sort-up.png') no-repeat center;
						background-size: cover;
					}
				}
			}
		}
		
		.empty-good{
			padding-top: 1rem;
		}
		.good-ul{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 0.24rem  0.24rem 0;
			
		}
	
	}
</style>